<template>
  <div class="me-wrap">
    <me-header></me-header>
    <me-content></me-content>
    <common-skip></common-skip>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import CommonSkip from 'common/skip/Skip'
import MeHeader from './components/Header'
import MeContent from './components/Content'
export default {
  name: 'Me',
  components: {
    CommonSkip,
    MeHeader,
    MeContent
  },
  data () {
    return {
      title: '个人中心'
    }
  },
  methods: {
    changeUserInfo () {
      const userName = this.$localStorage.get('userName')
      const avatar = this.$localStorage.get('avatar')
      const userInfo = {}
      if (userName !== null) {
        userInfo.userName = userName
        userInfo.avatar = avatar
      } else {
        userInfo.userName = ''
        userInfo.avatar = ''
      }
      this.getUserInfo(userInfo)
    },
    ...mapActions({
      getUserInfo: 'GetAuthUrl'
    })
  },
  created () {
    this.changeUserInfo()
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.me-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $navColor
  overflow hidden
  touch-action none

  .bgc
    background-color $navColor
    color($whiteFzClor)
    position relative
    z-index 3
</style>
